<!DOCTYPE html>
<html>
<head>
    <title>canvas</title>
    <meta charset="utf-8">
    <style type="text/css">
    body{
        background-color: #fff;
    }
    #c1,#c2,#c3,#c4,#c5{
        background-color: #fff;
        border:1px solid black;
    }
    #c1 span{
        color: #abc;
    }
    </style>
</head>
<body>
    <input type="button" value="←">
    <input type="button" value="→">
    <div>
        <img src="../img/img6.png" id="img1">
    </div>
    <canvas id="c1" width="400" height="400"></canvas>
    <canvas id="c2" width="400" height="400"></canvas>
    <canvas id="c3" width="400" height="400"></canvas>
    <canvas id="c4" width="400" height="400"></canvas>
    <canvas id="c5" width="400" height="400"></canvas>

    <script type="text/javascript">


window.onload  = function(){



//------------------图片的旋转----------------------------------
var aInput = document.getElementsByTagName('input');
var oImg = document.getElementById('img1');

var iNow = 0;

var yImg = new Image();
yImg.onload = function(){
    draw(oImg);
}
yImg.src = oImg.src;

function draw(obj){
    var oC2 = document.createElement('canvas');
    var oGC2 = oC2.getContext('2d');
    
    oC2.style.position = "relative";
    oC2.width = obj.width;
    oC2.height = obj.height;

    obj.parentNode.replaceChild(oC2, obj);

    oGC2.drawImage(obj, 0, 0);

    aInput[0].onclick = function(){
        console.log("left click");
        oGC2.rotate(Math.PI/2);
    }

    aInput[1].onclick = function(){
        if(iNow === 3){
            iNow = 0;
        }
        else{
            iNow ++;
        }
        console.log(iNow);
        toChange();
    }

    aInput[0].onclick = function(){
        if(iNow === 0){
            iNow = 3;
        }
        else{
            iNow --;
        }
        console.log(iNow);
        toChange();
    }

    function toChange(){

        switch(iNow){
            case 1:
                oC2.width = obj.height;
                oC2.height = obj.width;
                // oC2.style.top = (obj.height - obj.width)/2 + "px";
                // oC2.style.left = (obj.width - obj.height)/2 + "px";
                oGC2.rotate(Math.PI/2);
                oGC2.drawImage(obj, 0, -obj.height);
                break;

            case 2:
                oC2.width = obj.width;
                oC2.height = obj.height;
                // oC2.style.top = 0;
                // oC2.style.left = 0;
                oGC2.rotate(Math.PI);
                oGC2.drawImage(obj, -obj.width, -obj.height);
                break;

            case 3:
                oC2.width = obj.height;
                oC2.height = obj.width;
                // oC2.style.top = (obj.height - obj.width)/2 + "px";
                // oC2.style.left = (obj.width - obj.height)/2 + "px";
                oGC2.rotate(3*Math.PI/2);
                oGC2.drawImage(obj, -obj.width, 0);
                break;

            case 0:
                oC2.width = obj.width;
                oC2.height = obj.height;
                // oC2.style.top = 0;
                // oC2.style.left = 0;
                oGC2.rotate(0);
                oGC2.drawImage(obj, 0, 0);
                break;
        }
    }
}




//-------------------drawImage----------------------------------
var oC1 = document.getElementById("c1");
var oGC1 = oC1.getContext("2d");

var yImg1 = new Image();
yImg1.onload = function(){
    draw1(this);
}

yImg1.src = "../img/img4.png";

function draw1(obj){
    oGC1.drawImage(obj, 0,0);
}


//----------------createPattern------------------------------
var oC2 = document.getElementById("c2");
var oGC2 = oC2.getContext("2d");

var yImg2 = new Image();
yImg2.onload = function(){
    draw2(this);
}

yImg2.src = "../img/xx.png";

function draw2(obj){
    var bg = oGC2.createPattern(obj, "repeat");

    oGC2.fillStyle = bg;
    oGC2.fillRect(0,0,300,300);
}


//------------------createLinearGradient----------------------------
var oC3 = document.getElementById("c3");
var oGC3 = oC3.getContext("2d");

var obj = oGC3.createLinearGradient(100,100,300,300);
obj.addColorStop(0,"red");
obj.addColorStop(0.5,"yellow");
obj.addColorStop(1,"blue");
oGC3.fillStyle = obj;
oGC3.fillRect(100,100,200,200);


//------------------createRadialGradient----------------------------
var oC4 = document.getElementById("c4");
var oGC4 = oC4.getContext("2d");

var obj = oGC4.createRadialGradient(100,100,100,300,300,200);
obj.addColorStop(0,"red");
obj.addColorStop(0.5,"yellow");
obj.addColorStop(1,"blue");
oGC4.fillStyle = obj;
oGC4.fillRect(0,0,400,400);



//-------------------text---------------------------
var oC5 = document.getElementById("c5");
var oGC5 = oC5.getContext("2d");

oGC5.font = "100px impact";
oGC5.textBaseline = "top";
oGC5.textAlign = "left";

oGC5.shadowColor = "#ccc";
oGC5.shadowOffsetX = 6;
oGC5.shadowOffsetY = 6;
oGC5.shadowBlur = 3;
oGC5.fillText('xuxuan',0,0);

var w = oGC5.measureText('xuxuan').width;
oGC5.strokeText('xuxuan', (oC5.width - w)/2, (oC5.height -100)/2);

}
   </script>
</body>
</html>